<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
        <div class="header-left">
          <router-link to="/main/renshi/zhaoping/zhaopingxiudin" class="back-btn">
            <i class="el-icon-arrow-left"></i> 返回
          </router-link>
        </div>
        <div class="header-center">
          <h2 class="title">深圳市艾美思普科技有限公司</h2>
          <h3 class="subtitle">文件会审表</h3>
        </div>
        <div class="header-right">
          <template v-if="!isView">
            <el-button type="success" icon="el-icon-check" @click="saveData">保存</el-button>
            <el-button type="success" icon="el-icon-view" @click="goToList">列表</el-button> 
          </template>
        </div>
      </div>

      <div class="content-wrapper">
        <el-card class="form-card" shadow="hover">
          <el-form ref="form" :model="formData" label-width="120px" :disabled="isView">
            <div class="form-section">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="文件名称" prop="fileName" :rules="[{required: true, message: '请输入文件名称'}]">
                    <el-input v-model="formData.fileName" placeholder="请输入文件名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="文件编号" prop="fileNumber" :rules="[{required: true, message: '请输入文件编号'}]">
                    <el-input v-model="formData.fileNumber" placeholder="请输入文件编号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="版次" prop="fileVersion">
                    <el-input v-model="formData.fileVersion" placeholder="请输入版次"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="申请部门" prop="applicationDepartment" :rules="[{required: true, message: '请输入申请部门'}]">
                    <el-input v-model="formData.applicationDepartment" placeholder="请输入申请部门"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="编制/修订" prop="compilationRevision">
                    <el-input v-model="formData.compilationRevision" placeholder="请输入编制/修订"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20"><br/></el-row>
              <el-form-item label="方式" prop="reviewType" :rules="[{required: true, message: '请选择方式'}]">
                <el-radio-group v-model="formData.reviewType">
                  <el-radio label="new">
                    <el-tag type="success" effect="plain">新订</el-tag>
                  </el-radio>
                  <el-radio label="revision">
                    <el-tag type="warning" effect="plain">修订</el-tag>
                  </el-radio>
                  <el-radio label="abrogation">
                    <el-tag type="danger" effect="plain">废止</el-tag>
                  </el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="主要目的" prop="mainPurpose" :rules="[{required: true, message: '请输入主要目的'}]">
                <el-input type="textarea" v-model="formData.mainPurpose" :rows="3" placeholder="请输入主要目的"></el-input>
              </el-form-item>
            </div>

            <div class="review-section">
              <div class="section-title">
                <el-divider content-position="left">会审部门</el-divider>
                <div class="section-tip">各会签部门需在2日内回复，未作回复可视同认可。</div>
              </div>

              <el-table
                :data="formData.reviewDepartments"
                border
                style="width: 100%"
                :header-cell-style="tableHeaderStyle"
                :cell-style="tableCellStyle"
              >
                <el-table-column label="会审部门" prop="departmentName" min-width="180" align="center">
                </el-table-column>
                <el-table-column label="是否同意" width="200" align="center">
                  <template slot-scope="scope">
                    <el-radio-group v-model="scope.row.agreement" :disabled="isView">
                      <el-radio label="agree">
                        <el-tag type="success" size="mini" effect="plain">同意</el-tag>
                      </el-radio>
                      <el-radio label="disagree">
                        <el-tag type="danger" size="mini" effect="plain">不同意</el-tag>
                      </el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column label="主要意见" min-width="200" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.mainOpinion" :disabled="isView" placeholder="请输入主要意见"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="会签人" width="150" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.signatory" :disabled="isView" placeholder="请输入会签人"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="日期" width="180" align="center">
                  <template slot-scope="scope">
                    <el-date-picker
                      v-model="scope.row.signDate"
                      type="date"
                      :disabled="isView"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      :picker-options="pickerOptions"
                      :editable="false"
                      :clearable="true"
                      style="width: 100%">
                    </el-date-picker>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="form-footer">
              <el-divider></el-divider>
              <div class="footer-info">
                <div class="info-row">
                  <span class="info-item">表单编号及版本：AM-FR-0004 A/1</span>
                  <span class="info-item">生效日期：2007年09月 01日</span>
                  <span class="info-item">保存年限：长期</span>
                </div>
              </div>
            </div>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getFileReviewById, saveFileReview } from '@/api/fileReview'

export default {
  name: 'Huishen',
  data() {
    return {
      isView: false,
      pickerOptions: {
        disabledDate(time) {
          // 禁用未来日期
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      formData: {
        fileName: '',
        fileNumber: '',
        fileVersion: '',
        applicationDepartment: '',
        compilationRevision: '',
        reviewType: '',
        mainPurpose: '',
        reviewDepartments: [
          { departmentName: '总经理室', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '管理者代表', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '行政管理部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '财务管理部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡事业部 部长/副部长', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡业务部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡研发部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡物控部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡生产部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡工程部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '板卡品质部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '手机制造部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机事业部 部长/副部长', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '国际业务部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机物控部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机生产部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机工程部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机品质部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: '整机光电部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: 'LCD TV 事业部 部长/副部长', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: 'LCD TV 研发部', agreement: '', mainOpinion: '', signatory: '', signDate: '' },
          { departmentName: 'LCD TV 业务部', agreement: '', mainOpinion: '', signatory: '', signDate: '' }
        ]
      },
      tableHeaderStyle: {
        background: '#f5f7fa',
        color: '#303133',
        fontWeight: '600',
        height: '50px',
        padding: '0',
        textAlign: 'center'
      },
      tableCellStyle: {
        padding: '8px 0',
        textAlign: 'center'
      }
    }
  },
  created() {
    const { id, type } = this.$route.query
    if (id) {
      this.isView = type === 'view'
      this.getDetail(id)
    }
  },
  methods: {
    async getDetail(id) {
      try {
        const response = await getFileReviewById(id)
        if (response.data) {
          const { reviewDepartments, ...mainData } = response.data
          this.formData = {
            ...mainData,
            reviewDepartments: reviewDepartments || this.formData.reviewDepartments
          }
        }
      } catch (error) {
        console.error('获取详情失败', error)
      }
    },
    goToList(){
      this.$router.push('/main/biao/huishenList')
    },
    async saveData() {
      try {
        await this.$refs.form.validate()
        // 格式化日期时间
        const formattedData = {
          ...this.formData,
          createTime: this.formatDateTime(new Date()),
          updateTime: this.formatDateTime(new Date()),
          reviewDepartments: this.formData.reviewDepartments.map(dept => ({
            ...dept,
            createTime: this.formatDateTime(new Date()),
            updateTime: this.formatDateTime(new Date())
          }))
        }
        await saveFileReview(formattedData)
        this.$message.success('保存成功')
        this.$router.push('/main/biao/huishenList')
      } catch (error) {
        if (error === false) {
          this.$message.error('请完善必填信息')
        } else {
          console.error('保存失败', error)
          this.$message.error('保存失败：' + (error.message || '未知错误'))
        }
      }
    },
    formatDateTime(date) {
      const pad = (num) => String(num).padStart(2, '0')
      const year = date.getFullYear()
      const month = pad(date.getMonth() + 1)
      const day = pad(date.getDate())
      const hours = pad(date.getHours())
      const minutes = pad(date.getMinutes())
      const seconds = pad(date.getSeconds())
      return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  // background-color: #f0f2f5;
  min-height: 100vh;
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .header-left, .header-right {
    min-width: 150px;
  }

  .header-center {
    flex: 1;
    text-align: center;

    .title {
      margin: 0 0 8px;
      color: #303133;
      font-size: 20px;
      font-weight: 600;
    }

    .subtitle {
      margin: 0;
      color: #606266;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.back-btn {
  text-decoration: none;
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
  
  &:hover {
    color: #409EFF;
  }

  i {
    margin-right: 4px;
  }
}

.content-wrapper {
  background-color: transparent;
}

.form-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;

  .el-form {
    max-width: 100%;
  }
}

.form-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 4px;
}

.review-section {
  margin: 20px 0;

  .section-title {
    margin-bottom: 20px;

    .section-tip {
      color: #909399;
      font-size: 14px;
      margin-top: 8px;
      text-align: center;
    }
  }
}

.form-footer {
  margin-top: 30px;

  .footer-info {
    .info-row {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }

    .info-item {
      color: #606266;
      font-size: 14px;
    }
  }
}

:deep(.el-table) {
  margin: 20px 0;

  .el-input {
    width: 100%;
  }

  .el-radio-group {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .el-date-editor {
    width: 100%;
  }
}

:deep(.el-radio-group) {
  display: flex;
  gap: 30px;
  
  .el-radio {
    margin-right: 0;
    
    .el-tag {
      margin-left: 4px;
    }
  }
}

:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-form-item) {
  margin-bottom: 22px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.el-textarea__inner) {
  font-family: inherit;
}
</style>